<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>jQuery with iMethods "SandBox"</title>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  <script src="imethods.js"></script>
  <script src="jquery-1.2.1.js"></script>
  <style>
    body {background-color:#aaa}
    #monitor {display:none;overflow:auto;background-color:#000;height:80px;width:100%;position:fixed;bottom:0;left:0;z-index:1000;}
    #monitor h2 {margin:0;padding:0;font:bold 10px verdana;color:green;position:absolute;top:0;right:10px;}
    #monitor div {padding:10px;}
    #monitor div a {font:normal 12px verdana;color:red;line-height:20px;text-decoration:none;}
    #monitor div a:hover {text-decoration:underline}
    #box {width:200px;height:200px;background-color:gray;clear:both;}
    #box h1 {margin:0;padding:10px;background-color:#fff;font-size:14px;border:10px solid red;}
    div.runEx {margin:10px 0;padding:0;}
    div.runEx a {font:normal 15px verdana;color:blue;cursor:pointer;float:left;display:block;clear:both;}
    div.runEx div {font:normal 11px Courier;background-color:#ccc;float:left;clear:both;padding:5px;}
  </style>
  <script>
    runJquery = function(t){
      eval(t.nextSibling.nextSibling.innerHTML);
    }
    javascriptMonitor=function(){
      jsSrc=document.getElementsByTagName('script');
      var HTML="";

      for(var i=0;i<jsSrc.length;i++)
        if(jsSrc[i].src != "")
          HTML+="<a target=\"_blank\">"+jsSrc[i].src+"</a><br />";

      document.getElementById('monitor').getElementsByTagName('div')[0].innerHTML=HTML;
      setTimeout(function(){javascriptMonitor()},1000)
    }
  </script>
</head>

<body>
  <h1>jQuery with iMethods "SandBox"</h1>
  <div id="monitor">
    <h2>HTTP monitor request (javascript)</h2>
    <div></div>
  </div>
  
  <div class="runEx">
    <a onclick="runJquery(this)">Run!</a>
    <div>$('#box').css({'display':'none'}).show('slow', function(){$('#box').hide('slow') } );</div>
  </div>
  <div class="runEx">
    <a onclick="runJquery(this)">Run!</a>
    <div>$('#box').append('Teste').animate({'height': '+=50px'}, 'fast');</div>
  </div>
  <div class="runEx">
    <a onclick="runJquery(this)">Run!</a>
    <div>$('#box').load("teste.xml");</div>
  </div>
  <div class="runEx">
    <a onclick="runJquery(this)">Run!</a>
    <div>alert($('#form1').serializeArray()[0]['value']);</div>
  </div>

  <div id="box">
    <form id="form1">
      <input type="text" name="Nome" value="Roberto" />
      <select name="opcoes">
        <option value="1">Teste 1</option>
        <option value="2">Teste 2</option>
        <option value="3">Teste 3</option>
      </select>
    </form>
  </div>
  <div id="clonePa"></div>
  
  <script>
    javascriptMonitor();
  </script>
</body>
</html>
